<template>
  <div>
    <h1>computed 函数</h1>
    <hr>
    <ul>
      <li>{{ count }}</li>
      <li>{{ doubleCount }}</li>
      <li>
        <button @click="count++">+1</button>
      </li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue'
const count = ref(1)
// 基于 count 计算 2倍 count 结果
// 计算属性是一个泛型函数，一般情况下不需要指定类型
const doubleCount = computed(() => count.value * 2)
// const doubleCount = computed<number>(() => count.value * 2)

</script>

<style scoped>

</style>